<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
.range{
    position: relative;
    width: 40px;
    height: 400px;
    background-color: pink;
    border-radius: 20px;
    float: left;
    margin-right: 60px;
    user-select: none;
}
.range b{
    width: 100%;
    display: block;
    background-color: palegoldenrod;
    border-radius: 20px;
}
.range i{
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: chartreuse;
    border-radius: 50%;
    top:360px;
}
.range h1{
    position: absolute;
    top: 400px;

}
</style>
</head>
<body>
    <div class="range">
        <i style="top:360px"></i>
        <b style="height:400px;"></b>
        <h1 id="h1">0%</h1>
    </div>
    <div class="range">
        <i style="top:360px"></i>
        <b style="height:400px;"></b>
        <h1 id="h1">0%</h1>
    </div>
    <div class="range">
        <i style="top:360px"></i>
        <b style="height:400px;"></b>
        <h1 id="h1">0%</h1>
    </div>
    <div class="range">
        <i style="top:360px"></i>
        <b style="height:400px;"></b>
        <h1 id="h1">0%</h1>
    </div>
    <div class="range">
        <i style="top:360px"></i>
        <b style="height:400px;"></b>
        <h1 id="h1">0%</h1>
    </div>
<script>
    var range=document.querySelectorAll('.range');
    for(var i=0;i<range.length;i++){
    range[i].querySelector('i').onmousedown=function(event){
        var I=this;
        var R=I.parentNode;//找到i的父级元素
        var B=I.nextElementSibling;//找到b标签
        var hei=B.offsetHeight;
        var Ih=I.offsetHeight;
        var ITop=I.offsetTop;
        var h1=R.querySelector('h1');
        var startY=event.clientY;
        var maxTop=R.offsetHeight-Ih;
        document.onmousemove=function(event){
            event.preventDefault();
            var endY=event.clientY;
            var distY=endY-startY;
            var top=distY+ITop;
            if(top<=0){top=0};
            if(top>=maxTop){top=maxTop};
            I.style.top=top+'px';
            B.style.height=top+Ih+'px';
            var prc=Math.round(100-(top/maxTop*100));
            h1.innerText=prc+'%';
        }
        document.onmouseup=function(){
            document.onmousemove=null;
        }
    }
    }
</script>
</body>
</html>